<template>
  <div id="container">
    <el-row :gutter="50">
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <div id="blogListArea">
          <el-timeline>
            <el-timeline-item v-for="(item) in listItems" :key="item.id" :timestamp="item['created_at']" placement="top">
              <router-link :to="{name:'blogDetail', params: {articleId: item.id}}">
                <BoxCard :item-info="item" />
              </router-link>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
      <el-col id="rightAre" :xs="0" :sm="8" :md="8" :lg="8" :xl="8">
        <div id="introArea">
          <el-card class="box-card">
            <div id="introCard">
              <div class="block">
                <el-avatar :size="80" :src="authorInfo['avatar_url']" />
                <h3>{{ authorInfo['nick_name'] }}</h3>
              </div>
            </div>
            <el-collapse>
              <el-collapse-item title="#博主身份" name="1">
                <div>{{ authorInfo['brief_intro'] }}</div>
              </el-collapse-item>
              <el-collapse-item title="#公告栏" name="2">
                <div>{{ authorInfo['appeal'] }}</div>
              </el-collapse-item>
              <el-collapse-item title="#联系博主" name="3">
                <div>QQ:{{ authorInfo['qq_number'] }}</div>
              </el-collapse-item>
            </el-collapse>
            <div id="statistics">
              <div>
                <div>
                  <p>{{ articleCnt }}</p>
                  <p>文章</p>
                </div>
              </div>
              <div>
                <div>
                  <p>{{ tagCnt }}</p>
                  <p>标签</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BoxCard from '@/views/home/components/BoxCard'
import { GetFirstPageList, getAmount } from '@/api/article'
import { fetchAuthor } from '@/api/author'

export default {
  name: 'Home',
  components: {
    BoxCard
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 6,
      listItems: [],
      authorInfo: {},
      articleCnt: 0,
      tagCnt: 0
    }
  },
  created() {
    GetFirstPageList(this.currentPage, this.pageSize).then(res => {
      this.listItems = res.data['list']
      this.total = res.data['cnt']
    })
    fetchAuthor().then(res => {
      this.authorInfo = res.data
    })
    getAmount().then(res => {
      this.articleCnt = res.data['articleCnt']
      this.tagCnt = res.data['tagCnt']
    })
  },
  methods: {}
}
</script>

<style scoped>
#blogListArea {

}

#introArea {

}

#rightAre {
  position: sticky;
  right: 0;
  top: 5rem;
}

#introCard {
  text-align: center;
}

#statistics {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  padding: 1rem;
}

#statistics > div {
  display: flex;
  justify-content: center;
  flex: 1;
}

#container {
  margin: 0 auto;
  padding-top: 1rem;
  width: 82%;
}

.quote {
  color: #fff;
  border-left: 3px solid #f56c6c;
  padding: 10px;
  background-color: rgba(126,129,135,.3);
}
</style>
